<script lang="ts">
	import type { CardInfo } from '$lib/api/proto/resource_card_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { EllipsisVertical, PenLine } from 'lucide-svelte';
	import EditCardModal from './EditCardModal.svelte';
	import ConfirmModal from '$lib/components/modal/ConfirmModal.svelte';
	import EditCardLinkModal from './EditCardLinkModal.svelte';
	import ResourceCardModal from './ResourceCardModal.svelte';

	interface Props {
		resourceId: string;
		cardInfo: CardInfo;
		onChange: () => void;
		onRemove: () => void;
		onLink: () => void;
	}
	const props: Props = $props();

	let showUpdateModal = $state(false);
	let showRemoveModal = $state(false);
	let showLinkModal = $state(false);

	let curTab = $state('content' as 'content' | 'link');
	let linkCardId = $state(null as string | null);

	async function removeCard() {
		if (userStore.userSession == null) {
			return;
		}
		await callApi(
			appStore.resourceCardApiClient.remove({
				sessionId: userStore.userSession,
				resourceId: props.resourceId,
				cardId: props.cardInfo.cardId
			}).response
		);
		showRemoveModal = false;
		appStore.addToastMessage({
			level: 'success',
			content: '删除知识卡片成功',
			keepTime: 2000
		});
		props.onRemove();
	}
</script>

<div class="card bg-base-300 w-[400px] h-[340px] shadow-sm">
	<div class="card-body">
		<div class="flex w-[370px] justify-between items-center">
			<h2
				class="card-title text-secondary max-w-[300px] overflow-hidden truncate"
				title={props.cardInfo.basicInfo?.title}
			>
				{props.cardInfo.basicInfo?.title}
			</h2>

			<div class="dropdown">
				<div tabindex="0" role="button" class="btn btn-ghost">
					<EllipsisVertical size={16} />
				</div>
				<ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-[80px] p-2 shadow-sm gap-2">
					<li>
						<button type="button" class="btn btn-ghost" onclick={() => (showUpdateModal = true)}
							>修改</button
						>
					</li>
					<li class="text-error">
						<button type="button" class="btn btn-ghost" onclick={() => (showRemoveModal = true)}
							>删除</button
						>
					</li>
				</ul>
			</div>
		</div>
		{#if curTab == 'content'}
			<SimpleEditor data={props.cardInfo.basicInfo?.content} sizeClass="h-[200px]" readOnly />
		{:else if curTab == 'link'}
			<div class="h-[200px] overflow-y-auto flex flex-wrap content-start">
				{#each props.cardInfo.linkList as link}
					<button class="btn btn-ghost" onclick={() => (linkCardId = link.cardId)}
						>{link.title}</button
					>
				{/each}
				<button
					type="button"
					class="btn btn-ghost"
					onclick={() => (showLinkModal = true)}
				>
					<PenLine size={16} />
				</button>
			</div>
		{/if}
	</div>
	<div class="tabs tabs-lift tabs-bottom bg-base-200">
		<button
			class="tab {curTab == 'content' ? 'tab-active' : ''}"
			onclick={() => (curTab = 'content')}>内容</button
		>
		<button class="tab {curTab == 'link' ? 'tab-active' : ''}" onclick={() => (curTab = 'link')}
			>相关卡片</button
		>
	</div>
</div>

<div class="absolute -left-[10000px]">
	{#if showUpdateModal}
		<EditCardModal
			resourceId={props.resourceId}
			cardInfo={props.cardInfo}
			onCancel={() => (showUpdateModal = false)}
			onOk={() => {
				props.onChange();
				showUpdateModal = false;
			}}
		/>
	{/if}
	{#if showRemoveModal}
		<ConfirmModal
			title="删除知识卡片"
			content={`是否删除知识卡片${props.cardInfo.basicInfo?.title}?`}
			type="error"
			okName="删除"
			onCancel={() => (showRemoveModal = false)}
			onOk={() => removeCard()}
		/>
	{/if}

	{#if showLinkModal}
		<EditCardLinkModal
			resourceId={props.resourceId}
			cardInfo={props.cardInfo}
			onCancel={() => (showLinkModal = false)}
			onOk={() => {
				showLinkModal = false;
				props.onLink();
			}}
		/>
	{/if}

	{#if linkCardId != null}
		<ResourceCardModal
			resourceId={props.resourceId}
			cardId={linkCardId}
			onClose={() => (linkCardId = null)}
		/>
	{/if}
</div>
